<template>
  <div class="appraise-commodity">
    <BackNavigation v-bind:title-info="titleInfo"/>
    <div class="appraise-commodity-container">
      <div class="appraise-input">
        <div class="appraise-input-img-container">
          <img v-lazy="this.$route.query.goodsIcon">
        </div>
        <textarea name="appraise-input-text" id="feedback-text" placeholder="评价商品，您的评价能够方便更多人哦～"
                  v-model="appraiseText"></textarea>
      </div>
      <div class="appraise-title">
        <p>评价标签</p>
        <input type="button" class="title-appraise" v-for="appraiseKey in appraiseKeyList"
               v-bind:class="appraiseKey.selected ? 'selected-key' : ''"
               v-bind:value="appraiseKey.title" @click="selectedClick(appraiseKey)">
      </div>
      <UploadImgListVue v-model="imgDataList" v-on:send-files="sendFiles"/>
      <div class="appraise-score">
        <div class="commodity-score">
          <p>商品评分</p>
          <ScroeStarVue v-model="commodityScroe"/>
        </div>
        <div class="service-score">
          <p>商家服务</p>
          <ScroeStarVue v-model="serviceScroe"/>
        </div>
        <div class="express-score">
          <p>物流速度</p>
          <ScroeStarVue v-model="expressScroe"/>
        </div>
      </div>
    </div>
    <input type="button" value="发表评价" @click="appraiseCommodityClick">
    <!--<NoDataVue v-bind:vue-info="noDataInfo" v-if="!nullShow ? nullShow : !appraiseKeyList.length"/>-->
    <Actionsheet v-model="sheetShow" v-bind:actions="actions"/>
  </div>
</template>

<script>
  /* eslint-disable no-extra-boolean-cast */
  import * as recommend from 'api/recommend'
  import { compressImgFile } from 'assets/base/base'
  import { get_cookie } from 'assets/cookie/cookie'
  import BackNavigation from '../mine/navigation.vue'
  import NoDataVue from '../mine/no_data.vue'
  import ScroeStarVue from '../appraise/scroe_start.vue'
  import { Actionsheet } from 'mint-ui'
  import UploadImgListVue from '../appraise/upload_photos.vue'

  export default {
    name: 'appraise-commodity',
    components: {
      BackNavigation,
      NoDataVue,
      ScroeStarVue,
      Actionsheet,
      UploadImgListVue
    },
    data () {
      return {
        appraiseItem: this.$store.state.appraiseCommodity,
        appraiseKeyList: {
          type: Array,
          default: []
        },
        nullShow: false,
        titleInfo: {
          leftTitle: '返回',
          title: '商品评价',
          rightTitle: ''
        },
        noDataInfo: {
          title: '没有数据啊',
          iconUrl: '../../assets/img/common/no_data.png'
        },
        sheetShow: false,
        actions: [
          {
            name: '拍照',
            method: this.getCamera
          },
          {
            name: '从相册中选择',
            method: this.getPictureLibrary
          }
        ],
        appraiseText: '',             // 评价文字
        appraiseSelectedKeyList: [],  // 评价标题文字数组
//        appraiseImgeList: [],         // 评价图片数组
//        appraiseImgeUrlList: [],      // 评价图片url数组
        imgDataList: [],
        imgFileList: [],              // 评价图片数组
        commodityScroe: 1,            // 商品评分
        serviceScroe: 1,              // 服务评分
        expressScroe: 1               // 物流评分
      }
    },
    methods: {
      appraiseCommodityClick () {
        let appraiseStr = this.appraiseText
        for (let title of this.appraiseSelectedKeyList) {
          appraiseStr += ',' + title
        }
        console.log('appraiseCommodityClick')
        console.log(appraiseStr)
        if (!appraiseStr.length) {
          this.$toast({
            message: '请填写评价文字或选择评价标签',
            position: 'middle',
            duration: 1000,
            className: 'toast'
          })
          return false
        }
        if (!this.commodityScroe || !this.serviceScroe || !this.expressScroe) {
          this.$toast({
            message: '请对服务评价星级',
            position: 'middle',
            duration: 1000,
            className: 'toast'
          })
          return false
        }
        if (this.imgFileList.length > 5) {
          this.$toast({
            message: '最多可上传5张图片',
            position: 'middle',
            duration: 1000,
            className: 'toast'
          })
          return false
        }
        this.$indicator.open({
          text: '数据上传中...',
          spinnerType: 'fading-circle'
        })
        let params = {
          orderId: this.$route.query.orderId,
          content: appraiseStr,
          token: get_cookie('key'),
          goodsId: this.$route.query.goodsId,
          goodsScore: this.commodityScroe,
          serviceScore: this.serviceScroe,
          timeScore: this.expressScroe,
          images: this.imgFileList,
          length: this.imgFileList.length
        }
//        console.log(params)
//        return false
        recommend.postAppraiseInfo(params).then(resault => {
          this.$indicator.close()
          this.nullShow = true
          console.log(resault.data)
          if (resault.status === 200 && resault.data.resStatus === 0) {
            this.$router.push({
              path: '/appraise_sucess',
              query: {
                goodsId: this.$route.query.goodsId
              }
            })
          } else {
            this.$toast({
              message: resault.data.message,
              position: 'middle',
              duration: 1000,
              className: 'toast'
            })
            return
          }
          console.log('sucess')
        }).catch(resault => {
          this.$indicator.close()
          this.nullShow = true
        })
      },
      selectedClick (keyInfo) {
        keyInfo.selected = !keyInfo.selected
        if (keyInfo.selected) {
          this.appraiseSelectedKeyList.push(keyInfo.title)
        } else {
          let keyInfoIndex = 0
          for (let index in this.appraiseSelectedKeyList) {
            let value = this.appraiseSelectedKeyList[index]
            if (keyInfo.title === value) {
              keyInfoIndex = index
              break
            }
          }
          this.appraiseSelectedKeyList.splice(keyInfoIndex, 1)
        }
      },
      sendFiles (imgFiles) {
        this.imgFileList = imgFiles
      }
    },
    watch: {
//      commodityScroe (newValue, oldValue) {
//        console.log('commodityScroe:newValue=' + newValue + ',oldValue=' + oldValue)
//      },
//      serviceScroe (newValue, oldValue) {
//        console.log('serviceScroe:newValue=' + newValue + ',oldValue=' + oldValue)
//      },
//      expressScroe (newValue, oldValue) {
//        console.log('commodityScroe:newValue=' + newValue + ',oldValue=' + oldValue)
//      },
//      imgDataList (newValue, oldValue) {
//        console.log(newValue)
//      }
    },
    created () {
      this.$indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      })
      let params = {
        goodsId: this.$route.query.goodsId
      }
      recommend.getAppraiseKeyList(params).then(resault => {
        this.$indicator.close()
        this.nullShow = true
        if (resault.status === 200 && resault.data.data !== null) {
          let titleInfoList = []
          for (let titleStr of resault.data.data) {
            let titleInfo = {
              title: titleStr,
              selected: false
            }
            titleInfoList.push(titleInfo)
          }
          this.appraiseKeyList = titleInfoList
        }
      }).catch(resault => {
        this.$indicator.close()
        this.nullShow = true
        console.log(resault)
      })
    },
    mounted () {
      let fileBtn = document.getElementById('upload-input')
      let clickBtn = document.getElementById('upload-click')
      clickBtn.addEventListener('click', function (e) {
        if (fileBtn) {
          fileBtn.click()
        }
        e.preventDefault() // prevent navigation to "#"
      }, false)
    }
  }
</script>

<style lang="scss">
  div.appraise-commodity {
    padding: 44px 0 0 0;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
    /*background-color: rgb(233, 233, 233);*/

    >div.appraise-commodity-container {
      /*position: fixed;*/
      width: 100%;
      height: 100%;
      padding-bottom: 44px;
      /*background-color: red;*/

      >div.appraise-input {
        box-sizing: border-box;
        padding: 10px 15px;
        width: 100%;
        height: 100px;
        background-color: rgb(233, 233, 233);

        >div.appraise-input-img-container {
          position: relative;
          background-color: white;
          border-width: 0 1px 0 0;
          border-style: solid;
          border-color: rgb(233, 233, 233);
          width: 30%;
          height: 80px;
          float: left;

          >img {
            /*border: 0.5px solid rgb(233, 233, 233);*/
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 100%;
            width: auto;
            height: 80px;
            float: left;
          }
        }

        >textarea {
          border: 0 solid transparent;
          outline: none;
          color: rgb(66, 66, 66);
          padding: 10px 10px 10px 10px;
          border-radius: 0;
          height: 80px;
          width: 70%;
          font-size: 12px;
          background-color: white;
        }

        >textarea::placeholder {
          /*padding: 15px 15px 15px 15px;*/
          color: rgb(133, 133, 133);
          font-size: 12px;
        }
      }

      >div.appraise-title {
        box-sizing: border-box;
        padding: 0 15px 10px 15px;
        width: 100%;
        height: auto;
        overflow: hidden;
        background-color: rgb(233, 233, 233);

        >p {
          /*float: left;*/
          /*background-color: red;*/
          width: auto;
          text-align: left;
          color: rgb(66, 66, 66);
          font-size: 14px;
        }

        >input {
          font-size: 12px;
          outline: none;
          margin-top: 5px;
          margin-right: 5px;
          float: left;
          padding: 0 10px 0 10px;
          border: 0 solid rgb(233, 233, 233);
          border-radius: 5px;
          height: 25px;
          -webkit-appearance: none;
          background-color: white;
          -webkit-tap-highlight-color: rgb(27, 162, 232);
        }

        >input.selected-key {
          background-color: rgb(27, 162, 232);
          border-color: rgb(27, 162, 232);
          color: white;
        }
      }

      >div.appraise-score {
        box-sizing: border-box;
        /*padding: 0 15px 54px 15px;*/
        width: 100%;
        height: auto;
        overflow: hidden;
        background-color: white;

        >div {
          border-width: 0 0 1px 0;
          border-color: rgb(233, 233, 233);
          border-style: solid;
          float: left;
          width: 100%;
          height: 44px;
          background-color: transparent;

          >p {
            padding-left: 15px;
            float: left;
            width: auto;
            line-height: 43px;
            height: 43px;
            background-color: transparent;
          }

          >div {

          }
        }

        >div:first-child {
          border-width: 1px 0 1px 0;
        }
      }
    }

    >input {
      position: fixed;
      left: 0;
      z-index: 6;
      float: left;
      height: 44px;
      width: 100%;
      bottom: 0;
      padding: 0 10px 0 10px;
      text-align: center;
      font-size: 14px;
      background-color: rgb(27, 162, 232);
      border-radius: 0;
      color: white;
      border: 0 solid orange;
      outline: none;
      -webkit-appearance: none;  /*去掉苹果的默认UI来渲染按钮*/
    }
  }

  .toast {
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
  }
</style>
